@import './base';

// 版心
.wrap {
   position: relative;
   width: 982px;
   height: 285px;
   margin: 0 auto;
}

// 头部开始
// 黑色导航栏
.m-top {
   height: 70px;
   box-sizing: border-box;
   background: #242424;
   border-bottom: 1px solid #000;

   .wrap {
      width: 1100px;
      height: 70px;
      margin: 0 auto;
      /* display: flex;
        justify-content: center;
        align-items: center; */


      // logo部分
      .logo {
         float: left;
         width: 176px;
         height: 69px;

         background: url(../lib/iconfont/topbar.png) no-repeat 0 9999px;
         background-position: 0 0;

         a {
            width: 157px;
            height: 100%;
            padding-right: 20px;
         }
      }


      //中间导航 
      ul {
         float: left;

         // width: 508px;
         .lst {
            position: relative;
         }

         li {
            float: left;
            // width: 94px;
            height: 70px;
            // text-align: center;
            // line-height: 70px;
            font-size: 14px;

            &:hover {
               background: #000;
               text-decoration: none;

               a {
                  color: #fff;
               }
            }

            a {
               padding: 0 19px;
               text-align: center;
               line-height: 70px;
               color: #ccc;
            }

            .hot {
               display: block;
               position: absolute;
               top: 21px;
               left: 100px;
               width: 28px;
               height: 19px;
               background: url(../lib/iconfont/topbar.png) no-repeat 0 9999px;
               background-position: -190px 0;
            }
         }
      }


      // 右边功能
      .m-tophead {
         float: right;
         // transition: all 1s;
         height: 45px;
         margin: 19px 0 0 20px;
         padding: 10px 22px 0 0;
         background-position: right -47px;
         background-image: none;
         a{
            &:hover{
               text-decoration: underline;
            }
         }
      }

      .m-topvd {
         float: right;
         width: 90px;
         height: 32px;
         margin: 19px 0 0 12px;
         box-sizing: border-box;
         padding-left: 16px;
         border: 1px solid #4F4F4F;
         // background-position: 0 -140px;
         line-height: 33px;
         color: #ccc;
         border-radius: 20px;
         &:hover{
            border: 1px solid #ccc;
            color: #fff;
         }
      }

      .m-srch {
         float: right;
         width: 158px;
         height: 32px;
         margin-top: 20px;
         background-color: #fff;
         border-radius: 32px;

         i {
            float: left;
            width: 30px;
            height: 30px;
            background: url(../lib/iconfont/topbar.png);
            background-position: 0 -99px;
         }

         span {
            position: absolute;
            float: left;
            margin-top: 9.5px;

            // width: 111px;
            // height: 100%;
            // color: #9b9b9b;
            input {
               width: 121.6px;
               height: 16px;
               font-size: 12px;

               &::placeholder {
                  font-size: 12px;
                  color: #9b9b9b;
               }

               &:focus::placeholder {
                  opacity: 0;

               }
            }

            /* label{
                    // display: block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 115.0;
                    height: 16px;
                    font-size: 12px;
                    color: #9b9b9b;
                    cursor: text;
                    
                } */
         }
      }
   }
}



// 红色导航栏
.m-nav {
   height: 35px;
   box-sizing: border-box;
   background-color: #C20C0C;
   border-bottom: 1px solid #a40011;

   .header-btn {
      width: 1100px;
      height: 100%;
      margin: 0 auto;
      display: flex;

      ul {
         display: flex;
         margin-left: 180px;

         em {
            display: inline-block;
            height: 20px;
            padding: 0 13px;
            margin: 7px 17px 0;
            border-radius: 20px;
            line-height: 21px;
            color: #fff;

            &:hover {
               background: #9B0909;
            }
         }
      }
   }
}

// 头部结束


// 轮播图开始
.b-ban {

   background-image: url(../upload/00.jpg);
   background-size: 6000px;
   background-position: center center;
   // overflow: hidden;
   // filter: blur(5px);


   //左侧图片轮播部分 
   .ban {
      // overflow: hidden;
      position: relative;
      display: block;
      height: 100%;

      // 左右箭头
      .j-left,
      .j-right {
         display: block;
         position: absolute;
         top: 50%;
         margin-top: -31px;
         width: 37px;
         height: 63px;
         background: url(../lib/iconfont/banner.png) 0 9999px no-repeat;
         text-indent: -9999px;

         &:hover {
            // text-decoration: underline;
            background-color: rgba(51, 51, 51, 0.3);
         }
      }

      .j-left {
         left: -68px;
         background-position: 0 -360px;
      }

      .j-right {
         right: -68px;
         background-position: 0 -508px;
      }


      // 左侧轮播区域
      .ban-left {

         height: 100%;

         a {
            display: block;
            height: 100%;

            img {
               width: 730px;
               height: 100%;
            }
         }

      }



      // 小圆点区域
      .dots {
         position: absolute;
         top: 259px;
         left: 0;
         width: 730px;
         height: 20px;
         text-align: center;

         .adots {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url(../lib/iconfont/banner.png) 0 9999px no-repeat;
            background-position: 3px -343px;
         }

         .active {
            background-position: -16px -343px;
         }
      }
   }



   // 右侧下载链接
   .ban-right {
      position: absolute;
      top: 0;
      z-index: 20;
      right: -1px;
      width: 254px;
      height: 285px;
      background: url(../lib/iconfont/download.png) no-repeat 0 0;

      .btn {
         display: block;
         width: 215px;
         height: 56px;
         margin: 186px 0 0 19px;
         background: url(../lib/iconfont/download.png) no-repeat 0 0;
         background-position: 0 9999px;
         text-indent: -9999px;

         &:hover {
            background-position: 0 -290px;
            // text-decoration: none;
         }
      }

      p {
         // display: block;
         height: 12px;
         margin: 10px auto;
         text-align: center;
         color: #8d8d8d;
      }

      // 左右阴影
      .l-shadow,
      .r-shadow {
         // display: block;

         position: absolute;
         top: 0;
         left: -20px;
         width: 20px;
         height: 285px;
         background: url(../lib/iconfont/banner.png) 0 9999px no-repeat;
         background-position: -1px 0;
      }

      .r-shadow {
         left: auto;
         right: -20px;
         background-position: -20px 0;
      }
   }



}

// 轮播图结束


// 主体开始
.main {
   width: 980px;
   min-height: 700px;
   height: 1400px;
   margin: 0 auto;
   background-color: #fff;
   border: 1px solid #d3d3d3;
   border-width: 0 1px;
   position: relative;
   &::before{
      content: '';
      height: 100%;
      position: absolute;
      top: 0;
      right: 250px;
      border-right: 1px solid #d3d3d3;
    }

   /* 外部大盒子 */
   .mn1 {
      float: left;
      width: 100%;
      margin-right: -250px;

      .mn1c {
         margin-right: 251px;

         .wrap3 {
            padding: 20px 20px 40px;
            
            // 热门推荐
            .rmtj {

               // 热门标题
               .v-hd2 {
                  height: 33px;
                  padding: 0 10px 0 34px;
                  background: url(../lib/iconfont/index.png) no-repeat 0 9999px;
                  background-position: -225px -156px;
                  border-bottom: 2px solid #C10D0C;

                  .tit {
                     float: left;
                     font-size: 20px;
                     font-weight: normal;
                     line-height: 28px;
                     font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
                  }

                  .tab {
                     float: left;
                     margin: 7px 0 0 20px;

                     .s-fc3 {
                        &:hover {
                           color: #666;
                           border-bottom: 0.5px solid;
                        }
                     }

                     .line {
                        margin: 0 10px;
                        color: #ccc;
                     }
                  }

                  .more {
                     float: right;
                     margin-top: 9px;

                     .s-fc3 {
                        &:hover {
                           color: #666;
                           border-bottom: 0.5px solid;
                        }
                     }

                     i {
                        display: inline-block;
                        width: 12px;
                        height: 12px;
                        margin-left: 4px;
                        vertical-align: middle;
                        background: url(../lib/iconfont/index.png) no-repeat 0 9999px;
                        background-position: 0 -240px;
                     }
                  }
               }

               //热门列表信息
               .m-cvrlst {
                  width: 731px;
                  height: 468px;
                  margin: 20px 0 0 -42px;

                  li {
                     float: left;
                     width: 140px;
                     height: 204px;
                     padding-left: 42px;
                     box-sizing: content-box;
                     // display: inline-block;
                     // width: 140px;
                     // height: 188px;
                     // overflow: hidden;
                     padding: 0 0 30px 40px;
                     line-height: 1.4;

                     .u-cover-1 {
                        width: 140px;
                        height: 140px;
                        position: relative;

                        img {
                           display: block;
                           width: 100%;
                           height: 100%;
                           border: 0;
                        }

                        .u-jp {
                           position: absolute;
                           top: 0;
                           left: 0;
                           width: 40px;
                           height: 40px;
                           display: inline-block;
                           overflow: hidden;
                           vertical-align: middle;
                           background: url(../lib/iconfont/icon2.png) no-repeat 0 9999px;
                           background-position: -135px -220px;
                        }

                        .msk {
                           position: absolute;
                           top: 0;
                           left: 0;
                           width: 100%;
                           height: 100%;
                           background: url(../lib/iconfont/coverall.png) no-repeat;
                           background-position: 0 0;
                        }

                        .bottom {
                           position: absolute;
                           bottom: 0;
                           left: 0;
                           width: 100%;
                           height: 27px;
                           background: url(../lib/iconfont/coverall.png) no-repeat;
                           background-position: 0 -537px;
                           color: #ccc;

                           .icon-play {
                              position: absolute;
                              right: 10px;
                              bottom: 5px;
                              width: 16px;
                              height: 17px;
                              background: url(../lib/iconfont/iconall.png) no-repeat;
                              background-position: 0 0;

                              &:hover {
                                 background-position: 0 -60px;
                              }
                           }

                           .icon-headset {
                              float: left;
                              width: 14px;
                              height: 11px;
                              background: url(../lib/iconfont/iconall.png) no-repeat;
                              background-position: 0 -24px;
                              margin: 9px 5px 9px 10px;
                           }

                           .nb {
                              float: left;
                              margin: 7px 0 0 0;
                           }
                        }
                     }

                     .dec {
                        width: 100%;
                        margin: 8px 0 3px;
                        font-size: 12px;

                        .tit {
                           display: inline-block;
                           max-width: 100%;
                           color: #000;
                           // _width: 100%;
                           vertical-align: middle;
                           font-family: Arial, Helvetica, sans-serif;

                           &:hover {
                              text-decoration: underline;
                           }
                        }
                     }
                  }
               }
            }

            // 新碟上架
            .new {

               //新碟标题
               .v-hd2 {
                  height: 33px;
                  padding: 0 10px 0 34px;
                  background: url(../lib/iconfont/index.png) no-repeat 0 9999px;
                  background-position: -225px -156px;
                  border-bottom: 2px solid #C10D0C;

                  .tit {
                     float: left;
                     font-size: 20px;
                     font-weight: normal;
                     line-height: 28px;
                     font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
                  }

                  .more {
                     float: right;
                     margin-top: 9px;

                     .s-fc3 {
                        &:hover {
                           color: #666;
                           border-bottom: 0.5px solid;
                        }
                     }

                     i {
                        display: inline-block;
                        width: 12px;
                        height: 12px;
                        margin-left: 4px;
                        vertical-align: middle;
                        background: url(../lib/iconfont/index.png) no-repeat 0 9999px;
                        background-position: 0 -240px;
                     }
                  }
               }

               // 碟片信息
               .n-disk {
                  position: relative;
                  zoom: 1;
                  height: 186px;
                  margin: 20px 0 37px;
                  border: 1px solid #d3d3d3;

                  // 轮播外盒子
                  .inner {
                     height: 184px;
                     padding-left: 16px;
                     background: #f5f5f5;
                     border: 1px solid #fff;

                     // 轮播里盒子
                     .roll {
                        float: left;
                        width: 645px;
                        height: 180px;
                        overflow: hidden;
                        position: relative;

                        ul {
                           position: absolute;
                           top: 0;
                           width: 645px;
                           margin: 28px 0 0 0;

                           li {
                              float: left;
                              display: inline;
                              width: 118px;
                              height: 150px;
                              margin-left: 11px;
                              background: url(../lib/iconfont/index.png) no-repeat 0 9999px;
                              background-position: -260px 100px;

                              .u-cover {
                                 margin-bottom: 7px;
                                 width: 100px;
                                 height: 100px;
                                 position: relative;
                                 display: block;

                                 &:hover {
                                    .icon-play {
                                       display: block;
                                    }
                                 }

                                 .j-img {
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                 }

                                 .msk {
                                    width: 118px;
                                    height: 100px;
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    background: url(../lib/iconfont/coverall.png) no-repeat;
                                    background-position: 0 -570px;
                                 }

                                 .icon-play {
                                    display: none;
                                    position: absolute;
                                    right: 10px;
                                    bottom: 5px;
                                    left: 72px;
                                    width: 22px;
                                    height: 22px;
                                    background: url(../lib/iconfont/iconall.png) no-repeat;
                                    background-position: 0 -85px;
                                 }
                              }

                              .f-thide {
                                 overflow: hidden;
                                 text-overflow: ellipsis;
                                 white-space: nowrap;
                                 word-wrap: normal;
                                 width: 90%;
                                 line-height: 18px;

                                 .s-fc0 {
                                    color: #000;
                                 }

                                 .s-fc3 {
                                    color: #666;
                                 }
                              }

                           }
                        }

                        /*  &:nth-child(1) ul{
                                    left: 0;
                                }
                                &:nth-child(2) ul{
                                    left: 645px;
                                }
                                &:nth-child(3) ul{
                                    left: -645px;
                                }
                                &:nth-child(4) ul{
                                    left: -645px;
                                } */
                     }

                     // 左右箭头
                     .pre,
                     .nxt {
                        position: absolute;
                        top: 71px;
                        width: 17px;
                        height: 17px;
                        background: url(../lib/iconfont/index.png) no-repeat 0 9999px;
                     }

                     .pre {
                        left: 4px;
                        background-position: -260px -75px;
                     }

                     .nxt {
                        background-position: -300px -75px;
                     }

                  }
               }
            }

            // 榜单
            .bill {

               // 榜单标题
               .v-hd2 {
                  height: 33px;
                  padding: 0 10px 0 34px;
                  background: url(../lib/iconfont/index.png) no-repeat 0 9999px;
                  background-position: -225px -156px;
                  border-bottom: 2px solid #C10D0C;

                  .tit {
                     float: left;
                     font-size: 20px;
                     font-weight: normal;
                     line-height: 28px;
                     font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
                  }

                  .more {
                     float: right;
                     margin-top: 9px;

                     .s-fc3 {
                        &:hover {
                           color: #666;
                           border-bottom: 0.5px solid;
                        }
                     }

                     i {
                        display: inline-block;
                        width: 12px;
                        height: 12px;
                        margin-left: 4px;
                        vertical-align: middle;
                        background: url(../lib/iconfont/index.png) no-repeat 0 9999px;
                        background-position: 0 -240px;
                     }
                  }
               }

               // 榜单信息
               .n-bilst {
                  height: 472px;
                  margin-top: 20px;
                  padding-left: 1px;
                  background: url(../lib/iconfont/index_bill.png) no-repeat;

                  .blk {
                     float: left;
                     width: 230px;

                     .top {
                        height: 100px;
                        padding: 20px 0 0 19px;

                        .cver {
                           float: left;
                           display: inline;
                           width: 80px;
                           height: 80px;
                           position: relative;

                           img {
                              display: block;
                              width: 100%;
                              height: 100%;
                           }

                           .msk {
                              position: absolute;
                              top: 0;
                              left: 0;
                              width: 100%;
                              height: 100%;
                              background: url(../lib/iconfont/coverall.png) no-repeat;
                              background-position: -145px -57px
                           }
                        }

                        .tit {
                           float: left;
                           width: 116px;
                           margin: 6px 0 0 10px;

                           a {
                              color: #333;

                              .f-thide {
                                 width: 100%;
                                 overflow: hidden;
                                 text-overflow: ellipsis;
                                 white-space: nowrap;
                                 word-wrap: normal;
                                 font-size: 14px;
                                 font-weight: 700;

                                 &:hover {
                                    text-decoration: underline;
                                 }
                              }
                           }

                           .btn {
                              margin-top: 10px;

                              a {
                                 display: block;
                                 float: left;
                                 width: 22px;
                                 height: 22px;
                                 margin-right: 10px;
                                 text-indent: -9999px;
                                 background: url(../lib/iconfont/index.png) no-repeat 0 9999px;
                              }

                              .s-bg-9 {
                                 background-position: -267px -205px;

                                 &:hover {
                                    background-position: -267px -235px;
                                 }
                              }

                              .s-bg-10 {
                                 background-position: -300px -205px;

                                 &:hover {
                                    background-position: -300px -235px;
                                 }
                              }
                           }
                        }
                     }

                     dd {

                        // margin-inline-start: 40px;
                        ol {
                           height: 319px;
                           margin-left: 50px;
                           line-height: 32px;

                           li {
                              height: 32px;

                              .no {
                                 color: #c10d0c;
                                 float: left;
                                 position: relative;
                                 width: 35px;
                                 height: 32px;
                                 margin-left: -35px;
                                 text-align: center;
                                 // color: #666;
                                 font-size: 16px;
                              }

                              .nm {
                                 float: left;
                                 width: 97px;
                                 height: 32px;
                                 overflow: hidden;
                                 text-overflow: ellipsis;
                                 white-space: nowrap;
                                 word-wrap: normal;
                                 font-size: 12px;


                                 white-space: nowrap;
                                 /*2. 超出的部分隐藏*/
                                 overflow: hidden;

                                 /*3. 文字用省略号替代超出的部分*/
                                 text-overflow: ellipsis;


                                 &:hover {
                                    text-decoration: underline;
                                    color: #000;
                                 }
                              }

                              .oper {

                                 display: none;
                                 float: right;
                                 width: 82px;
                                 // height: 17px;
                                 margin-top: 7px;

                                 .s-bg {
                                    float: left;
                                    width: 17px;
                                    height: 17px;
                                    margin-right: 10px;
                                    background: url(..//lib/iconfont/index.png) no-repeat 0 9999px;
                                 }

                                 .s-bg-11 {
                                    background-position: -267px -268px;
                                 }

                                 .s-bg-12 {
                                    background-position: -297px -268px;
                                 }

                                 .u-icn-81 {
                                    float: left;
                                    width: 17px;
                                    height: 17px;
                                    margin: 2px 6px 0 0;
                                    background: url(../lib/iconfont/icon.png) no-repeat 0 9999px;
                                    background-position: 0 -700px;
                                 }
                              }
                           }

                           .z-hvr {

                              // overflow: hidden;
                              .oper {
                                 display: block;
                              }
                           }
                        }

                        .more {
                           clear: both;
                           height: 32px;
                           margin-right: 32px;
                           text-align: right;
                           line-height: 32px;

                           a {
                              &:hover {
                                 color: #000;
                                 text-decoration: underline;
                              }
                           }
                        }
                     }
                  }

                  .blk-1 {
                     width: 228px;

                     ol {
                        margin-left: 48px;

                        .nm.nm.nm.nm {
                           width: 178px-82px;
                        }
                     }
                  }
               }
            }
         }
      }
   }

   /* 右侧边栏 */
   .rnav {
      float: right;
      position: relative;
      width: 250px;

      /* 用户登录 */
      .user {
         width: 100%;
         height: 126px;

         /* 用户信息 */
         .user-info {
            width: 100%;
            height: 1px;
            border: 0;
            word-wrap: break-word;
            word-break: break-word;
            font-size: 12px;
            color: #333;

            .user-top {
               width: 100%;
               height: 126px;
               border: 0;
               word-wrap: break-word;
               word-break: break-word;
               color: #666;
               background: url(../lib/iconfont/index.png) no-repeat 0 9999px;
               background-position: 0 0;

               p {
                  width: 205px;
                  margin: 0 auto;
                  padding: 16px 0;
                  line-height: 22px;
               }

               a {
                  display: block;
                  width: 100px;
                  height: 31px;
                  margin: 0 auto;
                  line-height: 31px;
                  text-align: center;
                  color: #fff;
                  text-shadow: 0 1px 0 #8a060b;
                  background: url(../lib/iconfont/index.png) no-repeat 0 9999px;
                  background-position: 0 -195px;
                  &:hover{
                     color: #fff;
                     background-position: -110px -195px;
                  }
               }
            }
         }
      }

      /* 入驻歌手 */
      .singer {
         width: 100%;
         height: 455px;
         margin-top: 15px;

         h3 {
            position: relative;
            height: 23px;
            margin: 0 20px;
            border-bottom: 1px solid #ccc;
            color: #333;
            font-size: 100%;

            sapn {
               float: left;
            }

            a {
               float: right;
               font-weight: normal;
               color: #666;
               cursor: pointer;
            }
         }

         ul {
            margin: 6px 0 14px 20px;

            li {
               margin-top: 14px;
               float: left;
               width: 210px;
               height: 62px;
               background: #fafafa;

               a {
                  float: left;
                  width: 210px;
                  height: 62px;
                  background: #fafafa;
                  text-decoration: none;
                  cursor: pointer;
                  color: #333;

                  &:hover {
                     text-decoration: none;
                     background: #f4f4f4;
                  }

                  .left {
                     float: left;
                     width: 62px;
                     height: 62px;

                     img {
                        float: left;
                        width: 62px;
                        height: 62px;
                     }
                  }

                  .right {
                     float: left;
                     width: 133px;
                     height: 60px;
                     padding-left: 14px;
                     border: 1px solid #e9e9e9;
                     border-left: none;
                     cursor: pointer;

                     h4 {
                        margin-top: 8px;

                        sapn {
                           display: inline-block;
                           width: 90%;
                           overflow: hidden;
                           text-overflow: ellipsis;
                           white-space: nowrap;
                           word-wrap: normal;
                           font-size: 14px;
                        }
                     }

                     p {
                        width: 90%;
                        margin-top: 8px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        word-wrap: normal;
                     }
                  }
               }
            }
         }

         &>div {
            a {
               margin-left: 20px;
               border-radius: 4px;
               color: #333;
               background-position: right -100px;
               padding: 0 5px 0 0;
               white-space: nowrap;
               margin-top: 15px;
               display: inline-block;
               height: 31px;
               line-height: 31px;
               overflow: hidden;
               vertical-align: top;
               text-align: center;
               cursor: pointer;
               // background: transparent;
               background: url(../lib/iconfont/button2.png) no-repeat 0 9999px;
               background-position: right -100px;
               &:hover{
                  background-position: right -182px;
               }

               i {
                  width: 170px;
                  font-weight: bold;
                  color: #333;
                  background-position: 0 -59px;
                  padding: 0 15px 0 20px;
                  pointer-events: none;
                  display: inline-block;
                  height: 31px;
                  line-height: 31px;
                  overflow: hidden;
                  vertical-align: top;
                  text-align: center;
                  cursor: pointer;
                  
                  font-style: normal;
                  font-size: inherit;

                  // 找不到背景图
                  background: url(../lib/iconfont/button2.png) no-repeat 0 9999px;
                  background-position: 0 -59px;
                  &:hover{
                     background-position: 0 -141px;
                  }
                  
               }
            }
         }

      }

      /* 热门主播 */
      /* .hoter {
         width: 100%;
         height: 295px;
         background-color: #f95;
      } */
   }

}

// 主体结束

// 底部开始
.g-ft {
    position: relative;
    height: 325px;
    overflow: hidden;
    border-top: 1px solid #d3d3d3;
    background: #f2f2f2;
    
    .m-ft{
      width: 980px;
      margin: 0 auto;
      .f-cb{
         .enter{
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-top: 33px;
            &:first-child {
               margin-left: 0;
           }
            .unit{
               width: 45px;
               margin-left: 80px;
               text-align: center;
               color: #666;
               .tt {
                  display: inline-block;
                  width: 100px;
                  margin-top: 10px;
                  margin-left: -27.5px;
                  font-weight: 400;
                  font-size: 12px;
                  text-align: center;
                  color: rgba(0,0,0, 0.5);
              }
              
              
               .logonew{
                  display: block;
                  float: none;
                  width: 45px;
                  height: 45px;
                  margin: 0 auto;
                  background: url(../lib/iconfont/foot_enter_new2.png) no-repeat;
                  background-size: 220px 220px;
               }
               .logo-openplatform {
                  background-position: -170px -5px;
                  &:hover{
                     background-position: -5px -115px;
                  }
               }
              .logo-trade {
               background-position: -5px -170px;
               &:hover{
                  background-position: -60px -170px;   
               }
               }
               .logo-amped {
                  background-position: -5px -60px;
                  &:hover{
                     background-position: -60px -5px;
                  }
               }
               .logo-auth {
                  background-position: -60px -60px;
                  &:hover{
                     background-position: -115px -5px;
                  }
              }
              .logo-musician {
               background-position: -115px -115px;
               &:hover{
                  background-position: -5px -5px;
               }
              }
              .logo-reward {
               background-position: -170px -115px;
               &:hover{
                  background-position: -60px -115px; 
               }
              }
              .logo-cash {
               background-position: -170px -60px;
               &:hover{
                  background-position: -115px -60px;
               }
              }

            }
         }
         .copy{
            padding-top: 60px;
            line-height: 24px;
            margin: 0 auto;
            text-align: center;
            .link{
               a{
                  text-decoration: none;
                  color: #969696;
                  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                  &:hover{
                     color: #666;
                     text-decoration: underline;
                  }
               }
               span{
                  margin: 0 8px 0 8px;
                  color: #D9D9D9;
               }
            }
            .s-fc3{
               color: #666;
               a{
                  &:hover{
                     text-decoration: underline;
                  }
               }
               .police-logo {
                  width: 14px;
                  height: 14px;
                  background: url(../images/police.png) no-repeat;
                  background-size: cover;
                  display: inline-block;
                  margin-right: 2px;
                  vertical-align: -2px;
              }
               .sep {
                  margin-right: 14px;
              }

            }
         }
      }
    }
}

// 底部结束

// top块
.m-back {
   display: block;
   position: fixed;
   _position: absolute;
   text-indent: -9999px;
   left: 50%;
   margin-left: 500px;
   bottom: 160px;
   width: 49px;
   height: 44px;
   background: url(../lib/iconfont/sprite.png) no-repeat 0 9999px;
   background-position: -265px -47px;
   &.m-back:hover {
      background-position: -325px -47px;
  }
}


// 底部播放栏
.f-updown {
   position: relative;
   position: fixed;
   bottom: -45px;
   width: 100%;
   transition: all 0.3s;

   .locks {
       .lock {
           position: absolute;
           top: -14px;
           right: 15px;
           width: 52px;
           height: 67px;
           background: url(../images/playbar.png) no-repeat 0 -380px;

           a {
               display: block;
               width: 18px;
               height: 18px;
               margin: 6px 0 0 17px;
               background: url(../images/playbar.png) no-repeat -80px -380px;

               &:hover {
                   background: url(../images/playbar.png) no-repeat -80px -400px;
               }
           }

           .lockdown {
               background: url(../images/playbar.png) no-repeat -100px -380px;

               &:hover {
                   background: url(../images/playbar.png) no-repeat -100px -400px;
               }
           }
       }

       .lock-right {
           position: absolute;
           top: -1px;
           right: 0;
           width: 15px;
           height: 54px;
           background: url(../images/playbar.png) no-repeat -52px -393px;
           pointer-events: none;
       }
   }

   .background {
       height: 53px;
       zoom: 1;
       margin-right: 67px;
       background: url(../images/playbar.png) 0 0;
       background-repeat: repeat-x;
   }

   .hand {
       position: absolute;
       top: -10px;
       z-index: -88;
       width: 100%;
       height: 20px;
       cursor: pointer;
   }

   .f-play-music {
       float: left;
       position: absolute;
       left: 50%;
       top: 6px;
       z-index: 15;
       width: 1100px;
       height: 47px;
       margin: 0 auto;
       margin-left: -490px;

       .btns {
           float: left;
           width: 137px;
           height: 42px;
           padding: 6px 0 0 0;

           a {
               display: block;
               float: left;
               width: 28px;
               height: 28px;
               margin-right: 8px;
               margin-top: 5px;
               text-indent: -9999px;

           }

           .prev {
               background: url(../images/playbar.png) no-repeat 0 -130px;

               &:hover {
                   background: url(../images/playbar.png) no-repeat -30px -130px;
               }
           }

           .play {
               width: 36px;
               height: 36px;
               margin-top: 0;
               background: url(../images/playbar.png) no-repeat 0 -204px;

               &:hover {
                   background: url(../images/playbar.png) no-repeat -40px -204px;
               }
           }
           .palse {
               background: url(../images/playbar.png) no-repeat 0 -165px;
               &:hover {
                   background: url(../images/playbar.png) no-repeat -40px -165px;
               }
           }

           .next {
               background: url(../images/playbar.png) no-repeat -80px -130px;

               &:hover {
                   background: url(../images/playbar.png) no-repeat -110px -130px;
               }
           }

       }

       .def-cover {
           float: left;
           position: relative;
           margin: 6px 15px 0 0;

           img {
               height: 34px;
               width: 34px;
           }

           a {
               position: absolute;
               top: 0px;
               left: 0px;
               display: block;
               width: 34px;
               height: 35px;
               background: url(../images/playbar.png) no-repeat 0 -80px;
           }
       }

       .play-process {
           float: left;
           position: relative;
           width: 608px;

           .words {
               height: 28px;
               overflow: hidden;
               color: #e8e8e8;
               text-shadow: 0 1px 0 #171717;
               line-height: 28px;
           }

           .pbar {
               float: left;
               position: relative;
               width: 493px;

               .barbg {
                   width: 493px;
                   height: 9px;
                   background: url(../images/statbar.png) no-repeat right 0;

                   .ready {
                       width: 0;
                       height: 9px;
                       border-radius: 9px;
                       background-color: red;
                       .curser {

                           position: absolute;
                           top: 0;
                           left: 0;
                           height: 9px;
                           background: url(../images/playlist.png) no-repeat left -66px;
       
                           .btn {
                               position: absolute;
                               top: -7px;
                               right: -13px;
                               width: 22px;
                               height: 24px;
                               margin-left: -11px;
                               background: url(../images/iconall.png) no-repeat 0 -250px;
       
                               &:hover {
                                   background: url(../images/iconall.png) no-repeat 0 -280px;
                               }
                           }
                       }
                   }
               }

           }
       }

       .time {
           position: absolute;
           top: -3px;
           right: -84px;
           color: #797979;
           text-shadow: 0 1px 0 #121212;

           em {
               color: #a1a1a1;
               font-style: normal;
               text-align: left;
               font-size: inherit;
           }
       }

       .operations {
           float: left;
           width: 87px;

           .icn {
               display: block;
               float: left;
               width: 25px;
               height: 25px;
               margin: 11px 2px 0 0;
               text-indent: -9999px;
           }

           .icn-pip {
               position: relative;
               background: url(../images/pip.jpg) no-repeat 0 0;

               &:hover {
                   background: url(../images/pip.jpg) no-repeat 0 -25px;
               }
           }

           .icn-add {
               background: url(../images/playbar.png) no-repeat -88px -163px;

               &:hover {
                   background: url(../images/playbar.png) no-repeat -88px -189px;
               }
           }

           .icn-share {
               background: url(../images/playbar.png) no-repeat -114px -163px;

               &:hover {
                   background: url(../images/playbar.png) no-repeat -114px -189px;
               }
           }
       }

       .controls {
           float: left;
           position: relative;
           z-index: 10;
           width: 126px;
           height: 36px;
           padding-left: 13px;
           background: url(../images/playbar.png) no-repeat -147px -238px;

           .icn {
               float: left;
               width: 25px;
               height: 25px;
               margin: 11px 2px 0 0;
               text-indent: -9999px;
           }

           .volume {
               background: url(../images/playbar.png) no-repeat -2px -248px;

               &:hover {
                   background: url(../images/playbar.png) no-repeat -31px -248px;
               }
           }

           .m-vol {
               display: none;
               position: absolute;
               top: -113px;
               left: 9px;
               clear: both;
               width: 32px;
               height: 113px;

               .barbg {
                   position: absolute;
                   top: 0;
                   left: 0;
                   width: 32px;
                   height: 113px;
                   background: url(../images/playbar.png) no-repeat 0 -503px;
               }

               .vbg {
                   position: absolute;
                   top: 0;
                   left: 14px;
                   width: 4px;
                   height: 113px;
                   padding: 4px 0;

                   .curr {
                       position: absolute;
                       bottom: 10px;
                       left: 0;
                       width: 4px;
                       height: 0;
                       border-radius: 4px;
                       background-color: red;
                       .btn {
                           position: absolute;
                           top: -10px;
                           left: -7px;
                           display: block;
                           width: 18px;
                           height: 20px;
                           background: url(../images/iconall.png) no-repeat -40px -250px;
                           cursor: pointer;
                       }
                   }

               }
           }

           .mode {
               background: url(../images/playbar.png) no-repeat -66px -248px;

               &:hover {
                   background: url(../images/playbar.png) no-repeat -93px -248px;
               }
           }

           .mode1 {
               background: url(../images/playbar.png) no-repeat -66px -344px;

               &:hover {
                   background: url(../images/playbar.png) no-repeat -93px -344px;
               }
           }

           .mode2 {
               background: url(../images/playbar.png) no-repeat -3px -344px;

               &:hover {
                   background: url(../images/playbar.png) no-repeat -33px -344px;
               }
           }

           .modetip {
               display: none;
               position: absolute;
               top: -35px;
               left: 12px;
               width: 81px;
               height: 39px;
               position: absolute;
               clear: both;
               background: url(../images/playbar.png) no-repeat 0 -457px;
               color: #fff;
               line-height: 34px;
               text-align: center;
           }
       }

       .add {
           float: left;
           width: 59px;
           height: 36px;

           .icn {
               float: left;
               width: 25px;
               height: 25px;
               margin: 11px 2px 0 0;
               text-indent: -9999px;
           }

           .list {
               display: block;
               float: left;
               width: 60px;
               padding-left: 21px;
               background: url(../images/playbar.png) no-repeat -42px -68px;
               line-height: 27px;
               text-align: center;
               color: #666;
               text-shadow: 0 1px 0 #080707;
               text-indent: 0;
               text-decoration: none;

               &:hover {
                   background: url(../images/playbar.png) no-repeat -42px -98px;
               }
           }
       }

       .f-playlist {
           display: none;
           position: absolute;
           left: 50%;
           bottom: 36px;
           z-index: -99;
           width: 986px;
           height: 301px;
           margin-left: -900px;
           border-radius: 6px 6px 0 0;
           background-color: #161616;
           box-shadow: 3px -3px 2px 2px #000;

           .listhd {
               position: relative;
               height: 40px;
               border-bottom: 2px solid #000;

               h4 {
                   position: absolute;
                   left: 25px;
                   top: 0;
                   height: 39px;
                   line-height: 39px;
                   font-size: 14px;
                   color: #e2e2e2;
               }

               .addall {
                   position: absolute;
                   left: 398px;
                   top: 12px;
                   height: 15px;
                   color: #ccc;
                   line-height: 15px;
                   cursor: pointer;

                   span {
                       float: left;
                       height: 16px;
                       width: 16px;
                       margin: 1px 6px 0 0;
                       background: url(../images/playlist.png) no-repeat -24px 0;
                   }
               }

               .line {
                   position: absolute;
                   top: 13px;
                   left: 477px;
                   height: 15px;
                   border-left: 1px solid #000;
                   border-right: 1px solid #2c2c2c;
               }

               .clear {
                   position: absolute;
                   left: 490px;
                   top: 12px;
                   height: 15px;
                   color: #ccc;
                   line-height: 15px;
                   cursor: pointer;

                   span {
                       float: left;
                       width: 13px;
                       height: 16px;
                       margin: 1px 6px 0 0;
                       background: url(../images/playlist.png) no-repeat -51px 0;
                   }
               }

               .f-close {
                   position: absolute;
                   top: 6px;
                   right: 8px;
                   width: 30px;
                   height: 30px;
                   overflow: hidden;
                   text-indent: -999px;
                   cursor: pointer;
                   background: url(../images/playlist.png) no-repeat -195px 9px;
               }
           }

           .listbd {
               position: absolute;
               left: 0;
               top: 41px;
               width: 976px;
               height: 260px;
               padding: 0 5px;
               overflow: hidden;
               background: url(../images/playlist.png) -1014px 0;
               background-repeat: repeat-y;

               .listmsk {
                   position: absolute;
                   left: 2px;
                   top: 0;
                   z-index: 4;
                   height: 260px;
                   width: 553px;
                   overflow: hidden;

                   .msk {
                       padding-top: 85px;
                       text-align: center;
                       line-height: 43px;
                       color: #aaa;

                       i {
                           float: none;
                           display: inline-block;
                           position: relative;
                           top: -4px;
                           width: 36px;
                           height: 29px;
                           margin-right: 3px;
                           background: url(../images/playlist.png) no-repeat -138px 0;
                           vertical-align: middle;
                       }
                   }
               }

               .bline {
                   position: absolute;
                   left: 555px;
                   top: -1px;
                   z-index: 2;
                   width: 6px;
                   height: 260px;
                   background: #000;
                   opacity: .5;
               }

               .ask {
                   position: absolute;
                   right: 25px;
                   top: 12px;
                   cursor: pointer;
                   z-index: 5;

                   a {
                       display: inline-block;
                       width: 21px;
                       height: 21px;
                       background:url(../images/playlist.png) no-repeat 0 -50px;
                       text-indent: 0;
                   }
               }
           }
       }
   }

}